<script setup lang="ts">
import { OResult, OFigure, OButton } from '@opensig/opendesign';
import noData from '@/assets/category/common/noData.svg';
import { $t } from '@/i18n';

defineProps<{
  src?: string;
  size?: 'small'|'normal'|'large'
}>();

const toHome = () => {
  location.href = '/';
};
</script>

<template>
  <div :class="['empty-wrap', `size-${size}`]">
    <OResult>
      <template #image>
        <OFigure class="img" :src="src ?? noData" />
      </template>
      <slot name="description">
        <OButton @click="toHome" color="primary" variant="outline" size="large" round="pill">
          {{ $t('common.backHome') }}
        </OButton>
      </slot>
    </OResult>
  </div>
</template>

<style lang="scss" scoped>
.empty-wrap {
  color: var(--o-color-info3);
  @include text1;

  :deep(.o-result) {
    --result-image-width: 240px;
    --result-image-height: 210px;
    @include respond-to('<=laptop') {
      --result-image-width: 160px;
      --result-image-height: 140px;
    }

    img {
      opacity: 1 !important;
    }
  }
  &.size-small {
    :deep(.o-result) {
      --result-image-width: 120px;
      --result-image-height: 105px;
      @include respond-to('<=laptop') {
        --result-image-width: 80px;
        --result-image-height: 70px;
      }
    }
  }
}
</style>
